<template>
	<view>
	<view class="car">
		<view class="text">为你专供优质产品</view>
		<view class="text1">严选资产 稳定安全</view>
		<view class="box1">
			<view class="box1-1">
				<view style="font-size: 70rpx; color: #ff4658; margin-top: 10rpx;" >{{highProduct.regularProductChgYear}}%</view>
				<view style="font-size: 24rpx; color: #999999;">年化率</view>
			</view>
			<view class="box1-1" style="margin-top: 15rpx;" >
				<view style="font-size: 60rpx; color: #333333;">{{highProduct.regularProductRegularTime * 30}}天</view>
				<view style="font-size: 24rpx; color: #999999;">产品期限</view>
			</view>
		</view>
		<view class="box2">
			累计成交{{highProduct.regularSupplierNumber}}笔
		</view>
		<view class="but">
			立即购买，先到先得
		</view>
		<view class="goumai">
			<text>查看更多定期理财产品</text>
			<image src='../../static/iamges/jiaobiao2.png' mode=""></image>
		</view>
	</view>
	</view>
</template>

<script>
	import {
		createNamespacedHelpers
	} from 'vuex';
	const {
		mapState,
		mapMutations,
		mapActions
	} = createNamespacedHelpers('licai');
	
	export default {
		created(){
			
			this.gethighProducts()
		},
		computed:{
			...mapState(['currentSift','highProduct'])
		},
		name:"huangjinCar",
		data() {
			return {
				
			};
		},
		methods: {
			...mapActions(['gethighProducts'])
			
		},
	}
</script>

<style lang="scss" scoped>
.car{
	box-shadow: 0rpx 10rpx 10rpx 0rpx #cdcdcd;
	height: 602rpx;
	width: 90%;
	margin: 0 auto;
	padding-top: 48rpx;
	border-radius: 20rpx;
	margin-top: -100rpx;
	background-color: #FFFFFF;
	.goumai{
		text-align: right;
		font-size: 22rpx;
		color: #cdcdcd;
		padding-right: 20rpx;
		
		image{
			height: 16rpx;
			width: 10rpx;
			margin-left: 20rpx;
		}
	}
	.but{
		height: 66rpx;
		width: 586rpx;
		background-color: #ff4658;
		border-radius: 10rpx;
		margin: 20rpx auto;
		color: #FFFFFF;
		font-size: 24rpx;
		text-align: center;
		line-height: 66rpx;
	}
	.box2{
		margin-top: 60rpx;
		height: 40rpx;
		width: 274rpx;
		border-radius:30rpx ;
		margin: 60rpx auto;
		color: #015bfd;
		background-color: #e4ebf8;
		text-align: center;
		font-size: 22rpx;
		line-height: 40rpx;
		
	}
	.box1{
		display: flex;
		.box1-1{
			width: 50%;
			text-align: center;
		}
	}
	.text1{
		margin-top: 20rpx;
		text-align: center;
		font-size: 24rpx;
		color: #999999;
		
	}
	.text{
		text-align: center;
		
		font-size: 36rpx;
		color: #333333;
	}
}
</style>
